From 663a50dd4eb061f6895e3f0b25cba9f6ea896229 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Fri, 18 Jul 2014 23:48:33 +0200 Subject: [PATCH] Adwaita: better colorswatches for the dark theme ...which reveals a "nice" border/fill border radius issue. --- gtk/resources/theme/Adwaita/_common.scss | 34 +++++++++++++++---- .../theme/Adwaita/gtk-contained-dark.css | 15 +++++--- gtk/resources/theme/Adwaita/gtk-contained.css | 9 ++++- 3 files changed, 47 insertions(+), 11 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index e9b4036309..586e280027 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -525,8 +525,15 @@ GtkLabel { } } -GtkColorButton.button { padding: 4px; } // Uniform padding on the - // GtkColorButton.button +GtkColorButton.button { + padding: 4px; // Uniform padding on the GtkColorButton + GtkColorSwatch { + border-radius: 1.5px; + box-shadow: inset 0 1px 1px transparentize(black, 0.8), + $widget_edge; + &:backdrop { box-shadow: none; } + } +} /********* * Links * @@ -2295,8 +2302,16 @@ GtkInfoBar { GtkColorSwatch { - border: 1px solid transparentize(black,0.7); - box-shadow: inset 0 1px 1px transparentize(black, 0.8); + border-width: 1px; + border-style: solid; + @if $variant == light { + border-color: transparentize(black,0.7); + box-shadow: inset 0 1px 1px transparentize(black, 0.8); + } + @else { + border-color: $borders_color; + box-shadow: inset 0 1px 1px transparentize(black, 0.6); + } &.color-light { &:hover { @@ -2315,9 +2330,16 @@ GtkColorSwatch { } } - &:hover { border-color: transparentize(black, 0.5); } + &:hover { + border-color: if($variant=='light', transparentize(black, 0.5), + $backdrop_borders_color); + } - &:backdrop { border-color: transparentize(black,0.8); box-shadow: none; } + &:backdrop { + border-color: if($variant=='light', transparentize(black,0.8), + $backdrop_borders_color); + box-shadow: none; + } &.top { border-top-left-radius: 5px; diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index e38d02ae9a..af6e850bd0 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -634,6 +634,11 @@ GtkColorButton.button { padding: 4px; } + GtkColorButton.button GtkColorSwatch { + border-radius: 1.5px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(238, 238, 236, 0.1); } + GtkColorButton.button GtkColorSwatch:backdrop { + box-shadow: none; } /********* * Links * @@ -2860,8 +2865,10 @@ GtkInfoBar { * Color Chooser * *****************/ GtkColorSwatch { - border: 1px solid rgba(0, 0, 0, 0.3); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); } + border-width: 1px; + border-style: solid; + border-color: #1c1f1f; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); } GtkColorSwatch.color-light:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); } GtkColorSwatch.color-light:hover:backdrop { @@ -2871,9 +2878,9 @@ GtkColorSwatch { GtkColorSwatch.color-dark:hover:backdrop { background-image: none; } GtkColorSwatch:hover { - border-color: rgba(0, 0, 0, 0.5); } + border-color: #1e2222; } GtkColorSwatch:backdrop { - border-color: rgba(0, 0, 0, 0.2); + border-color: #1e2222; box-shadow: none; } GtkColorSwatch.top { border-top-left-radius: 5px; diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index c71989bc06..27b902aff5 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -626,6 +626,11 @@ GtkColorButton.button { padding: 4px; } + GtkColorButton.button GtkColorSwatch { + border-radius: 1.5px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px white; } + GtkColorButton.button GtkColorSwatch:backdrop { + box-shadow: none; } /********* * Links * @@ -2852,7 +2857,9 @@ GtkInfoBar { * Color Chooser * *****************/ GtkColorSwatch { - border: 1px solid rgba(0, 0, 0, 0.3); + border-width: 1px; + border-style: solid; + border-color: rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); } GtkColorSwatch.color-light:hover { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); } -- 2.30.2